<template>
  <div class="CheckBtn" :style="CheckStyle" @click="changeState"></div>
</template>
<script>
import Red from '@/assets/img/red_tick.png'
import SkyBlue from '@/assets/img/skyblue_tick.png'
export default {
  props: {
    theme: {type:String,default:'SkyBlue'},
    state: {type:[Number,Boolean],default:0},
    width:{default:"0.66rem"},
    height:{default:"0.66rem"},
    check_id:{type:[String,Number],required:true}
  },
  watch:{
    theme:{
      handler(n){
        this.dTheme = n
        this.dState = 0
      },deep:true
    },
    state(n){this.dState = n},
  },
  mounted() {

  },
  data(){
    return {
      dState:0
    }
  },
  methods:{
    changeState(){
      this.dState=!this.dState
      let params={check_id:this.check_id,check_status:this.dState}
      this.$emit('changeCheckState',params)
    }
  },
  computed:{
    CheckStyle(){
      let _this = this
      let _url = ""
      let _return={
        width: _this.width,
        height: _this.height
      }
      //console.log('计算1次'+_this.dState)
      if (_this.dState){
        if (_this.theme=='SkyBlue'){
          _url = SkyBlue
        }else if(_this.theme=='Red'){
          _url = Red
        }else{
          //console.log('_return3')
          return _return
        }
        return {..._return,...{
          background:'url('+ _url +') no-repeat',
          backgroundSize:"cover",
        }}
      }else{
        //console.log('_return4')
        return _return
      }
    }
  }
}
</script>
<style scoped>
.CheckBtn{display: block;border-radius: 50%;border: 1px solid darkgray;background-color: white}
</style>
